<template>
  <div class="v-shape-boder-weight">
    <el-input-number
      v-model="row.value"
      style="width: calc(100% - 6px)"
      class="_alpha-input g-m-l-6"
      :min="1"
      :max="100"
      :controls="false"
      :precision="0"
      :disabled="disabled"
    />
  </div>
</template>

<script lang="ts" setup>
import { ShapeStyleValue } from "@/modules/model/modals/shapeCustomization/ShapeCustomizationManagementModel";
import { computed } from "vue";

const props = defineProps<{
  row: ShapeStyleValue;
  selected?: boolean;
  configurationDisabled?: boolean;
}>();

const disabled = computed(() => {
  return props.configurationDisabled;
});

// const borderWidthChange = () => {
//   if (!props.row.value || props.row.value < 0) props.row.value = '';
// };
</script>

<style lang="scss">
.v-shape-boder-weight {
  .el-input.is-disabled .el-input__wrapper {
    box-shadow: none;
  }

  .el-input-number .el-input__inner {
    text-align: left;
  }

  .el-input__wrapper {
    box-shadow: none;
    background: transparent;
  }

  .el-input-number.is-without-controls .el-input__wrapper {
    padding: 0;
  }
}
</style>
